<template>
  <el-container style="height: 100vh">
    <el-header class="head-bg-color">
      <br>
      <el-row>
        <el-select v-model="entity" placeholder="选择实体" style="width: 120px">
          <el-option
            v-for="item in entity_options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-autocomplete
          class="input-box"
          v-model="input"
          placeholder="输入查询内容"
          @keyup.enter.native="send_request"
          clearable
        ></el-autocomplete>

        <el-select v-model="relation" placeholder="选择关系" style="width: 180px">
          <el-option
            v-for="item in relation_options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          typeof="primary"
          icon="el-icon-search"
          @click="send_request"
          >查询</el-button
        >


      </el-row>
    </el-header>
    <el-main>
      <el-row :gutter="20">

        <el-col :span="22">
          <h1>查询结果</h1>
          <div class="grid-content bg-purple">

            <div class="module-container" >
              <el-card class="box-card">

                <!--            result-->
                <div style="overflow-y: scroll; max-height: 400px" v-show="show_result">
                  <div style="text-align: left; margin: 5px; line-height: 20px">
                    {{ result == "" ? "空" : result }}
                  </div>
                </div>

                <!--            list-->
                <div v-show="show_list" >
                  <el-table
                    :data="this.rList"
                    style="width: 100%">
                    <el-table-column
                      v-for ="item in tableType"
                      :prop="item.nameProp"
                      :label="item.nameLabel"
                      >
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  created() {
    this.close_result();
  },
  name: "Main",
  components: {},
  data() {
    return {
      tableType : [{nameProp: "name",nameLabel: "关系"}],
      show_result : false,
      show_list : false,
    // rels_department = []  # 科室－科室关系
    // rels_noteat = []  # 疾病－忌吃食物关系
    // rels_doeat = []  # 疾病－宜吃食物关系
    // rels_recommandeat = []  # 疾病－推荐吃食物关系
    // rels_commonddrug = []  # 疾病－通用药品关系
    // rels_recommanddrug = []  # 疾病－热门药品关系
    // rels_check = []  # 疾病－检查关系
    //
    // rels_symptom = []  # 疾病症状关系
    // rels_acompany = []  # 疾病并发关系
    // rels_category = []  # 疾病与科室之间的关系
      relation_options: [{
        value: 'rels_department',
        label: '科室-科室'
      },{
        value: 'rels_doeat',
        label: '疾病－宜吃食物'
      },{
        value: 'rels_recommandeat',
        label: '疾病－推荐吃食物'
      },{
        value: 'rels_commonddrug',
        label: '疾病－通用药品'
      },{
        value: 'rels_recommanddrug',
        label: '疾病－热门药品'
      },{
        value: 'rels_check',
        label: '疾病－检查'
      }, {
        value: 'rels_symptom',
        label: '疾病症状'
      }, {
        value: 'rels_acompany',
        label: '疾病并发'
      }, {
        value: 'rels_category',
        label: '疾病-科室'
      }],
      entity_options: [{
        value: 'drugs',
        label: '药品'
      }, {
        value: 'foods',
        label: '食物'
      }, {
        value: 'checks',
        label: '检查'
      }, {
        value: 'departments',
        label: '科室'
      }, {
        value: 'producers',
        label: '药品大类'
      }, {
        value: 'diseases',
        label: '疾病'
      }, {
        value: 'symptoms',
        label: '症状'
      }, {
        value: 'disease_infos',
        label: '疾病信息'
      }],
      entity: '',
      relation: '',
      input: "",

      result: '',
      rList: [{data: '小白菜'}]
    };
  },
  computed: {
  },
  methods: {
    close_result() {
      this.show_result = false;
      this.show_list = false;
    },
    send_request() {
      let that = this;
      console.log(this.input)
      if (this.input.length === 0 || this.input.trim() === "" || this.entity === '' || this.relation === '') {
        // 输入为空或全是空格
        this.$message({
          message: "输入为空,请重新输入",
          type: "warning",
        });
      } else {
        // 进行查询
        this.isLoading = true; // loading
        let input = this.input;
        let entity = this.entity;
        let relation = this.relation;

        // 请求并处理数据
        this.$axios
          .post(
            "http://localhost:8989/customer/homePage",
            {
              input : input,
              entity : entity,
              relation : relation
            },
            {
              timeout: 6000,
            }
          )
          .then((response) => {

            if (response.data.result != null) {
              this.result = response.data.result;
              this.show_result = true;
            }
            console.log(response.data.rList)
            if (response.data.rList != null) {
              // var rList1 = ['实例1', '实例1','实例1','实例1','实例1','实例1','实例1','实例1','实例1']

              for (var i=0;i<response.data.rList.length;i++){
                 this.rList[i] = { name : response.data.rList[i]}
              }
              console.log(this.rList)
              //console.log(rList1)
              this.show_list = true;
            }
          })
          .catch((response) => {
            // 清空所有
            this.isLoading = false;
            this.result = "";
            this.rList = [];
            let msg = "error！";
            console.log(response);
            if (response.response === undefined) {
              this.$notify.error({
                title: "错误",
                message: String(response),
              });
            } else if (response.response.status) {
              let status = response.response.status.toString();
              if (
                response.response.status > 499 &&
                response.response.status < 506
              ) {
                msg = " 服务端异常！";
              } else if (
                response.response.status > 399 &&
                response.response.status < 418
              ) {
                msg = " 客户端异常！";
              }
              this.$notify.error({
                title: status,
                message: msg,
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: String(response),
              });
            }
          });
      }
    },
  },
  mounted() {
  },
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #889091;
}

.el-header {
  text-align: left;
  line-height: 50px;
  min-height: 20vh;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 10px;
  min-height: 65vh;
  background-image: linear-gradient( 135deg, #C2FFD8 10%, #465EFB 100%);
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.head-bg-color {
  background-image: url("../assets/back.jpg")
}
.logo {
  width: 60px;
  height: auto;
  padding-top: 10px;
}
.logo-text {

  width: 300px;
  height: 50px;
}

.el-row {
  margin-bottom: 0;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-main {
  ;
}

.input-box {
  width: 300px;
}
.input-box >>> .el-input__inner {

  border-radius: 3px;
  color: #99a89a;
}
.grid-content {
  border-radius: 8px;
  min-height: 58vh;
  height: 58vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.demonstration {
  width: 100px;
  height: auto;
}

.content-desc {
  text-align: left;
  line-height: 20px;
  /* white-space: pre; */
}

/* main中三个模块中的容器 */
.module-container {
  margin: 10px;
  max-height: 350px;
  min-height: 350px;
}

/* 第二个模块中展示文本答案的卡片样式 */
.clearfix {
  text-align: left;

}
.text {
  font-size: 14px;
  text-align: left;

}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-top: 10px;
}

/* '.el-tag + .el-tag'是除第一个标签以外的 */
.el-tag {
  /* margin-left: 50px; */
  margin-top: 5px;
  margin-right: 5px;
}
</style>
